<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>期权期货组合盈亏分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#6B7280',
                        'neutral-light': '#F3F4F6',
                        'neutral-dark': '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .option-btn-active {
                background-color: #3B82F6;
                color: white;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-neutral-dark min-h-screen">
    <div class="fixed top-4 right-4 z-50">
        <a href="https://www.doubao.com/thread/wba5ac2ea47de5e6c" target="_blank" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-custom shadow-lg flex items-center">
            <i class="fa fa-pencil mr-2"></i> 编辑此页面
        </a>
    </div>

    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="mb-10 text-center">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-transparent bg-clip-text bg-gradient-blue mb-4 text-shadow">
                期权期货组合盈亏分析
            </h1>
            <p class="text-lg text-neutral max-w-2xl mx-auto">
                分析标的价格、期权行权价和手续费对组合盈亏的影响
            </p>
        </header>

        <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 bg-white rounded-xl shadow-card p-6 transition-custom hover:shadow-lg">
                <div class="flex flex-wrap justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-neutral-dark">盈亏曲线图</h2>
                    <div class="flex space-x-2 mt-2 lg:mt-0">
                        <button id="buyPutLongFutures" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom option-btn-active">
                            买入看跌+做多期货
                        </button>
                        <button id="buyCallShortFutures" class="px-4 py-2 bg-gray-200 text-neutral-dark rounded-lg hover:bg-gray-300 transition-custom">
                            买入看涨+做空期货
                        </button>
                    </div>
                    <div class="flex space-x-2 mt-2 lg:mt-0">
                        <button id="zoomIn" class="px-3 py-1 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-custom">
                            <i class="fa fa-search-plus"></i> 放大
                        </button>
                        <button id="zoomOut" class="px-3 py-1 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-custom">
                            <i class="fa fa-search-minus"></i> 缩小
                        </button>
                        <button id="resetView" class="px-3 py-1 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-custom">
                            <i class="fa fa-refresh"></i> 重置
                        </button>
                    </div>
                </div>
                <div class="h-[400px] relative">
                    <canvas id="profitChart"></canvas>
                    <div id="tooltip" class="hidden absolute bg-white shadow-lg rounded-lg p-3 z-10 text-sm"></div>
                </div>
            </div>

            <div class="space-y-6">
                <div class="bg-white rounded-xl shadow-card p-6 transition-custom hover:shadow-lg">
                    <h2 class="text-xl font-bold text-neutral-dark mb-4">参数设置</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">标的初始价格</label>
                            <input type="number" id="spotPrice" value="2500" min="0" step="10" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">期权行权价</label>
                            <input type="number" id="strikePrice" value="2600" min="0" step="10" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">期权权利金</label>
                            <input type="number" id="optionPremium" value="100" min="0" step="5" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">期货合约数量</label>
                            <input type="number" id="contracts" value="1" min="1" step="1" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">期权手续费率 (%)</label>
                            <input type="number" id="optionFeeRate" value="0.03" min="0" step="0.01" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral mb-1">期货手续费率 (%)</label>
                            <input type="number" id="futureFeeRate" value="0.1" min="0" step="0.01" 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                        <button id="updateChart" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-custom flex items-center justify-center">
                            <i class="fa fa-refresh mr-2"></i> 更新图表
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-card p-6 transition-custom hover:shadow-lg">
                    <h2 class="text-xl font-bold text-neutral-dark mb-4">盈亏分析</h2>
                    <div class="space-y-3">
                        <div class="p-3 bg-primary/5 rounded-lg border-l-4 border-primary">
                            <h3 class="font-medium text-primary">最大亏损</h3>
                            <p id="maxLoss" class="text-lg font-semibold">-¥200.00</p>
                        </div>
                        <div class="p-3 bg-secondary/5 rounded-lg border-l-4 border-secondary">
                            <h3 class="font-medium text-secondary">最大盈利</h3>
                            <p id="maxProfit" class="text-lg font-semibold">无限</p>
                        </div>
                        <div class="p-3 bg-accent/5 rounded-lg border-l-4 border-accent">
                            <h3 class="font-medium text-accent">盈亏平衡点</h3>
                            <p id="breakEven" class="text-lg font-semibold">¥2600.00</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-card p-6 transition-custom hover:shadow-lg">
                    <h2 class="text-xl font-bold text-neutral-dark mb-4">策略说明</h2>
                    <div class="space-y-3 text-neutral">
                        <p id="strategyDesc1">
                            <span class="font-semibold">买入看跌期权</span>: 赋予持有者以行权价卖出标的资产的权利
                        </p>
                        <p id="strategyDesc2">
                            <span class="font-semibold">做多期货</span>: 约定在未来以当前价格买入标的资产
                        </p>
                        <p id="strategyDesc3">
                            <span class="font-semibold">组合效果</span>: 当标的价格下跌时，看跌期权盈利弥补期货亏损；当标的价格上涨时，期货盈利弥补期权权利金损失
                        </p>
                    </div>
                </div>
            </div>
        </main>

        <section class="mt-12 bg-white rounded-xl shadow-card p-6 transition-custom hover:shadow-lg">
            <h2 class="text-xl font-bold text-neutral-dark mb-4">盈亏计算详情</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标的价格</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">期货盈亏</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">期权盈亏</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手续费</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总盈亏</th>
                        </tr>
                    </thead>
                    <tbody id="calculationTable" class="bg-white divide-y divide-gray-200">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </section>

        <footer class="mt-12 text-center text-neutral py-6 border-t border-gray-200">
            <p>© 2025 期权期货盈亏分析工具 | 使用 Chart.js 构建</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const ctx = document.getElementById('profitChart').getContext('2d');
            const spotPriceInput = document.getElementById('spotPrice');
            const strikePriceInput = document.getElementById('strikePrice');
            const optionPremiumInput = document.getElementById('optionPremium');
            const contractsInput = document.getElementById('contracts');
            const optionFeeRateInput = document.getElementById('optionFeeRate');
            const futureFeeRateInput = document.getElementById('futureFeeRate');
            const updateButton = document.getElementById('updateChart');
            const maxLossElement = document.getElementById('maxLoss');
            const maxProfitElement = document.getElementById('maxProfit');
            const breakEvenElement = document.getElementById('breakEven');
            const calculationTable = document.getElementById('calculationTable');
            const zoomInButton = document.getElementById('zoomIn');
            const zoomOutButton = document.getElementById('zoomOut');
            const resetViewButton = document.getElementById('resetView');
            const tooltip = document.getElementById('tooltip');
            const buyPutLongFuturesBtn = document.getElementById('buyPutLongFutures');
            const buyCallShortFuturesBtn = document.getElementById('buyCallShortFutures');
            const strategyDesc1 = document.getElementById('strategyDesc1');
            const strategyDesc2 = document.getElementById('strategyDesc2');
            const strategyDesc3 = document.getElementById('strategyDesc3');

            // 图表配置
            let chart;
            let priceRange = 1000; // 价格范围
            let priceSteps = 50;   // 价格步长
            let strategyType = 'put_long'; // 默认策略：买入看跌+做多期货

            // 计算盈亏函数
            function calculateProfits(spotPrice, strikePrice, optionPremium, contracts, optionFeeRate, futureFeeRate) {
                const prices = [];
                const futuresProfits = [];
                const optionProfits = [];
                const fees = [];
                const totalProfits = [];
                const breakEvens = [];

                // 生成价格点
                const minPrice = Math.max(0, spotPrice - priceRange);
                const maxPrice = spotPrice + priceRange;
                const step = (maxPrice - minPrice) / priceSteps;

                for (let i = 0; i <= priceSteps; i++) {
                    const price = minPrice + i * step;
                    prices.push(price);

                    let futuresProfit, optionProfit;
                    
                    // 根据策略类型计算盈亏
                    if (strategyType === 'put_long') {
                        // 买入看跌+做多期货
                        futuresProfit = (price - spotPrice) * contracts;
                        optionProfit = (Math.max(strikePrice - price, 0) - optionPremium) * contracts;
                    } else {
                        // 买入看涨+做空期货
                        futuresProfit = (spotPrice - price) * contracts;
                        optionProfit = (Math.max(price - strikePrice, 0) - optionPremium) * contracts;
                    }
                    
                    // 计算手续费
                    const optionFee = (optionPremium * contracts) * (optionFeeRate / 100);
                    const futureFee = (spotPrice * contracts) * (futureFeeRate / 100);
                    const totalFee = optionFee + futureFee;
                    
                    // 记录结果
                    futuresProfits.push(futuresProfit);
                    optionProfits.push(optionProfit);
                    fees.push(totalFee);
                    totalProfits.push(futuresProfit + optionProfit - totalFee);

                    // 记录盈亏平衡点（接近0的值）
                    if (i > 0 && Math.sign(totalProfits[i-1]) !== Math.sign(totalProfits[i])) {
                        breakEvens.push(price - (step / 2));
                    }
                }

                // 计算最大亏损和最大盈利
                const maxLoss = Math.min(...totalProfits);
                const maxProfit = Math.max(...totalProfits);

                return {
                    prices,
                    futuresProfits,
                    optionProfits,
                    fees,
                    totalProfits,
                    maxLoss,
                    maxProfit,
                    breakEvens
                };
            }

            // 更新表格数据
            function updateTable(spotPrice, strikePrice, optionPremium, contracts, optionFeeRate, futureFeeRate) {
                calculationTable.innerHTML = '';
                
                // 计算几个关键点的盈亏
                const keyPrices = [
                    Math.max(0, strikePrice - 300),
                    strikePrice - 200,
                    strikePrice - 100,
                    strikePrice,
                    strikePrice + 100,
                    strikePrice + 200,
                    strikePrice + 300
                ];
                
                keyPrices.forEach(price => {
                    let futuresProfit, optionProfit;
                    
                    // 根据策略类型计算盈亏
                    if (strategyType === 'put_long') {
                        // 买入看跌+做多期货
                        futuresProfit = (price - spotPrice) * contracts;
                        optionProfit = (Math.max(strikePrice - price, 0) - optionPremium) * contracts;
                    } else {
                        // 买入看涨+做空期货
                        futuresProfit = (spotPrice - price) * contracts;
                        optionProfit = (Math.max(price - strikePrice, 0) - optionPremium) * contracts;
                    }
                    
                    // 计算手续费
                    const optionFee = (optionPremium * contracts) * (optionFeeRate / 100);
                    const futureFee = (spotPrice * contracts) * (futureFeeRate / 100);
                    const totalFee = optionFee + futureFee;
                    
                    // 计算总盈亏
                    const totalProfit = futuresProfit + optionProfit - totalFee;
                    
                    // 创建表格行
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-gray-50 transition-custom';
                    
                    // 添加单元格
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">¥${price.toFixed(2)}</td>
                        <td class="px-6 py-4 whitespace-nowrap ${futuresProfit >= 0 ? 'text-green-600' : 'text-red-600'}">
                            ${futuresProfit >= 0 ? '+' : ''}¥${Math.abs(futuresProfit).toFixed(2)}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap ${optionProfit >= 0 ? 'text-green-600' : 'text-red-600'}">
                            ${optionProfit >= 0 ? '+' : ''}¥${Math.abs(optionProfit).toFixed(2)}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-neutral">
                            ¥${totalFee.toFixed(2)}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap ${totalProfit >= 0 ? 'text-green-600 font-medium' : 'text-red-600 font-medium'}">
                            ${totalProfit >= 0 ? '+' : ''}¥${Math.abs(totalProfit).toFixed(2)}
                        </td>
                    `;
                    
                    calculationTable.appendChild(row);
                });
            }

            // 更新策略描述
            function updateStrategyDescription() {
                if (strategyType === 'put_long') {
                    strategyDesc1.innerHTML = '<span class="font-semibold">买入看跌期权</span>: 赋予持有者以行权价卖出标的资产的权利';
                    strategyDesc2.innerHTML = '<span class="font-semibold">做多期货</span>: 约定在未来以当前价格买入标的资产';
                    strategyDesc3.innerHTML = '<span class="font-semibold">组合效果</span>: 当标的价格下跌时，看跌期权盈利弥补期货亏损；当标的价格上涨时，期货盈利弥补期权权利金损失';
                } else {
                    strategyDesc1.innerHTML = '<span class="font-semibold">买入看涨期权</span>: 赋予持有者以行权价买入标的资产的权利';
                    strategyDesc2.innerHTML = '<span class="font-semibold">做空期货</span>: 约定在未来以当前价格卖出标的资产';
                    strategyDesc3.innerHTML = '<span class="font-semibold">组合效果</span>: 当标的价格上涨时，看涨期权盈利弥补期货亏损；当标的价格下跌时，期货盈利弥补期权权利金损失';
                }
            }

            // 创建或更新图表
            function createOrUpdateChart(spotPrice, strikePrice, optionPremium, contracts, optionFeeRate, futureFeeRate) {
                const { 
                    prices, 
                    futuresProfits, 
                    optionProfits, 
                    fees,
                    totalProfits,
                    maxLoss,
                    maxProfit,
                    breakEvens 
                } = calculateProfits(spotPrice, strikePrice, optionPremium, contracts, optionFeeRate, futureFeeRate);

                // 更新分析数据
                maxLossElement.textContent = `¥${Math.abs(maxLoss).toFixed(2)}`;
                maxProfitElement.textContent = maxProfit === Infinity ? '无限' : `¥${maxProfit.toFixed(2)}`;
                
                if (breakEvens.length > 0) {
                    breakEvenElement.textContent = breakEvens.map(price => `¥${price.toFixed(2)}`).join('、');
                } else {
                    breakEvenElement.textContent = '无';
                }

                // 更新表格数据
                updateTable(spotPrice, strikePrice, optionPremium, contracts, optionFeeRate, futureFeeRate);

                // 更新策略描述
                updateStrategyDescription();

                // 如果图表已存在，销毁它
                if (chart) {
                    chart.destroy();
                }

                // 创建新图表
                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: prices,
                        datasets: [
                            {
                                label: '期货盈亏',
                                data: futuresProfits,
                                borderColor: '#60A5FA',
                                backgroundColor: 'rgba(96, 165, 250, 0.1)',
                                borderWidth: 2,
                                fill: false,
                                tension: 0.1,
                                pointRadius: 0,
                                pointHoverRadius: 5
                            },
                            {
                                label: '期权盈亏',
                                data: optionProfits,
                                borderColor: '#FBBF24',
                                backgroundColor: 'rgba(251, 191, 36, 0.1)',
                                borderWidth: 2,
                                fill: false,
                                tension: 0.1,
                                pointRadius: 0,
                                pointHoverRadius: 5
                            },
                            {
                                label: '总盈亏',
                                data: totalProfits,
                                borderColor: '#10B981',
                                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                borderWidth: 3,
                                fill: true,
                                tension: 0.1,
                                pointRadius: 0,
                                pointHoverRadius: 5
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    usePointStyle: true,
                                    padding: 20,
                                    font: {
                                        family: "'Inter', sans-serif",
                                        size: 12
                                    }
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                                titleColor: '#1F2937',
                                bodyColor: '#4B5563',
                                borderColor: '#E5E7EB',
                                borderWidth: 1,
                                padding: 12,
                                boxPadding: 6,
                                usePointStyle: true,
                                callbacks: {
                                    title: function(context) {
                                        return `标的价格: ¥${context[0].label.toFixed(2)}`;
                                    },
                                    label: function(context) {
                                        const label = context.dataset.label || '';
                                        const value = context.raw;
                                        return `${label}: ${value >= 0 ? '+' : ''}¥${Math.abs(value).toFixed(2)}`;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: '标的价格 (¥)',
                                    font: {
                                        family: "'Inter', sans-serif",
                                        size: 13,
                                        weight: 'bold'
                                    },
                                    color: '#4B5563',
                                    padding: { top: 10 }
                                },
                                grid: {
                                    color: 'rgba(229, 231, 235, 0.5)'
                                },
                                ticks: {
                                    font: {
                                        family: "'Inter', sans-serif"
                                    },
                                    callback: function(value) {
                                        return '¥' + value.toFixed(0);
                                    }
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: '盈亏 (¥)',
                                    font: {
                                        family: "'Inter', sans-serif",
                                        size: 13,
                                        weight: 'bold'
                                    },
                                    color: '#4B5563',
                                    padding: { top: 10 }
                                },
                                grid: {
                                    color: 'rgba(229, 231, 235, 0.5)'
                                },
                                ticks: {
                                    font: {
                                        family: "'Inter', sans-serif"
                                    },
                                    callback: function(value) {
                                        return (value >= 0 ? '+' : '') + '¥' + Math.abs(value).toFixed(0);
                                    }
                                }
                            }
                        },
                        animations: {
                            tension: {
                                duration: 1000,
                                easing: 'linear'
                            }
                        }
                    }
                });
            }

            // 初始渲染图表
            createOrUpdateChart(
                parseFloat(spotPriceInput.value),
                parseFloat(strikePriceInput.value),
                parseFloat(optionPremiumInput.value),
                parseFloat(contractsInput.value),
                parseFloat(optionFeeRateInput.value),
                parseFloat(futureFeeRateInput.value)
            );

            // 更新图表按钮事件
            updateButton.addEventListener('click', function() {
                createOrUpdateChart(
                    parseFloat(spotPriceInput.value),
                    parseFloat(strikePriceInput.value),
                    parseFloat(optionPremiumInput.value),
                    parseFloat(contractsInput.value),
                    parseFloat(optionFeeRateInput.value),
                    parseFloat(futureFeeRateInput.value)
                );
                
                // 添加按钮点击效果
                this.classList.add('bg-primary/80');
                setTimeout(() => {
                    this.classList.remove('bg-primary/80');
                }, 200);
            });

            // 缩放按钮事件
            zoomInButton.addEventListener('click', function() {
                priceRange = Math.max(200, priceRange - 200);
                createOrUpdateChart(
                    parseFloat(spotPriceInput.value),
                    parseFloat(strikePriceInput.value),
                    parseFloat(optionPremiumInput.value),
                    parseFloat(contractsInput.value),
                    parseFloat(optionFeeRateInput.value),
                    parseFloat(futureFeeRateInput.value)
                );
            });

            zoomOutButton.addEventListener('click', function() {
                priceRange = Math.min(2000, priceRange + 200);
                createOrUpdateChart(
                    parseFloat(spotPriceInput.value),
                    parseFloat(strikePriceInput.value),
                    parseFloat(optionPremiumInput.value),
                    parseFloat(contractsInput.value),
                    parseFloat(optionFeeRateInput.value),
                    parseFloat(futureFeeRateInput.value)
                );
            });

            resetViewButton.addEventListener('click', function() {
                priceRange = 1000;
                createOrUpdateChart(
                    parseFloat(spotPriceInput.value),
                    parseFloat(strikePriceInput.value),
                    parseFloat(optionPremiumInput.value),
                    parseFloat(contractsInput.value),
                    parseFloat(optionFeeRateInput.value),
                    parseFloat(futureFeeRateInput.value)
                );
            });

            // 输入框按Enter键更新图表
            [spotPriceInput, strikePriceInput, optionPremiumInput, contractsInput, optionFeeRateInput, futureFeeRateInput].forEach(input => {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        updateButton.click();
                    }
                });
            });

            // 图表悬停效果
            const profitChart = document.getElementById('profitChart');
            profitChart.addEventListener('mousemove', function(e) {
                if (!chart) return;
                
                const activePoints = chart.getElementsAtEventForMode(
                    e,
                    'index',
                    { intersect: false },
                    false
                );
                
                if (activePoints.length > 0) {
                    const firstPoint = activePoints[0];
                    const label = chart.data.labels[firstPoint.index];
                    const datasets = chart.data.datasets;
                    
                    let tooltipContent = `<div class="font-medium mb-1">标的价格: ¥${label.toFixed(2)}</div>`;
                    
                    datasets.forEach(dataset => {
                        const value = dataset.data[firstPoint.index];
                        const color = value >= 0 ? 'text-green-600' : 'text-red-600';
                        tooltipContent += `<div class="${color}">${dataset.label}: ${value >= 0 ? '+' : ''}¥${Math.abs(value).toFixed(2)}</div>`;
                    });
                    
                    tooltip.innerHTML = tooltipContent;
                    tooltip.style.display = 'block';
                    tooltip.style.left = (e.pageX + 10) + 'px';
                    tooltip.style.top = (e.pageY + 10) + 'px';
                } else {
                    tooltip.style.display = 'none';
                }
            });
            
            profitChart.addEventListener('mouseout', function() {
                tooltip.style.display = 'none';
            });

            // 策略切换按钮事件
            buyPutLongFuturesBtn.addEventListener('click', function() {
                if (strategyType !== 'put_long') {
                    strategyType = 'put_long';
                    this.classList.add('option-btn-active');
                    buyCallShortFuturesBtn.classList.remove('option-btn-active');
                    updateButton.click();
                }
            });
            
            buyCallShortFuturesBtn.addEventListener('click', function() {
                if (strategyType !== 'call_short') {
                    strategyType = 'call_short';
                    this.classList.add('option-btn-active');
                    buyPutLongFuturesBtn.classList.remove('option-btn-active');
                    updateButton.click();
                }
            });
        });
    </script>
</body>
</html>
    